<!-- components/ShikiCode/index.vue -->
<script setup>
import { onMounted, ref, watch } from 'vue'
import { ElMessage } from 'element-plus'
import { createHighlighter } from 'shiki'
import { useDebounceFn } from '@vueuse/core'

const props = defineProps({
  code: {
    type: String,
    required: true
  },
  language: {
    type: String,
    default: 'javascript'
  },
  theme: {
    type: String,
    default: 'github-dark'
  }
})

const highlightedCode = ref('')
const isLoading = ref(true)
const error = ref(null)
const isCopied = ref(false)

const highlighter = ref(null)

// 初始化高亮器
const initHighlighter = async () => {
  try {
    highlighter.value = await createHighlighter({
      themes: [props.theme],
      langs: [
        'javascript',
        'typescript',
        'java',
        'xml',
        'vue',
        'sql',
        'html',
        'css',
        'json',
        'bash'
      ]
    })
    highlightCode()
  } catch (err) {
    error.value = err
  } finally {
    isLoading.value = false
  }
}

// 高亮代码
const highlightCode = useDebounceFn(() => {
  if (!highlighter.value) return
  
  try {
    highlightedCode.value = highlighter.value.codeToHtml(props.code, {
      lang: props.language,
      theme: props.theme
    })
  } catch (err) {
    error.value = err
    // 如果语言不支持，尝试使用文本格式
    highlightedCode.value = highlighter.value.codeToHtml(props.code, {
      lang: 'text',
      theme: props.theme
    })
  }
}, 200)

// 监听变化
watch(() => [props.code, props.language, props.theme], highlightCode)

onMounted(initHighlighter)

// 复制代码功能
const copyCode = () => {
  navigator.clipboard.writeText(props.code).then(() => {
    isCopied.value = true
    ElMessage({ message: '代码已复制', type: 'success', duration: 2000 })
    setTimeout(() => {
      isCopied.value = false
    }, 2000)
  }).catch(err => {
    ElMessage({ message: '复制失败', type: 'error', duration: 2000 })
    console.error('复制失败:', err)
  })
}
</script>

<template>
  <div class="shiki-container">
  <button 
    v-if="!isLoading && !error" 
    @click="copyCode" 
    class="copy-btn"
  >
    {{ isCopied ? '已复制' : '复制代码' }}
  </button>
    <div v-if="isLoading" class="loading">Loading highlighter...</div>
    <div v-else-if="error" class="error">Error: {{ error.message }}</div>
    <div v-else v-html="highlightedCode" class="code-block"></div>
  </div>
</template>

<style scoped>
.shiki-container {
  position: relative;
}

.loading, .error {
  padding: 1em;
  background: #f5f5f5;
  border-radius: 4px;
}

.error {
  color: #ff0000;
}

.code-block {
  font-family: 'SFMono-Regular', Consolas, 'Liberation Mono', Menlo, monospace;
  font-size: 14px;
  line-height: 1.5;
  overflow: auto;
}

/* 覆盖 Shiki 的内联样式以便更好地控制 */
.code-block :deep(pre) {
  margin: 0;
  padding: 1em;
  overflow: auto;
  border-radius: 4px;
}

.code-block :deep(code) {
  font-family: inherit;
}

.copy-btn {
  position: absolute;
  top: 8px;
  right: 8px;
  padding: 4px 8px;
  background: rgba(0, 0, 0, 0.5);
  color: white;
  border: none;
  border-radius: 4px;
  font-size: 12px;
  cursor: pointer;
  transition: background 0.2s;
}

.copy-btn:hover {
  background: rgba(0, 0, 0, 0.7);
}
</style>